<!--
	Author: W3layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/
-->



<!DOCTYPE html>
<html>

<!-- Head -->
<head>

	<title>聊天中心</title>

	<!-- For-Mobile-Apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="keywords" content="Friends Chat History Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //For-Mobile-Apps -->

	<!-- Style --> <link rel="stylesheet" href="__static__/css/chat.css" type="text/css" media="all">

	<!-- Web-Fonts -->
		<link href='//fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'>
		<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
	<!-- //Web-Fonts -->

</head>
<!-- //Head -->

<!-- Body -->
<body>

	<h1>FRIENDS CHAT</h1>

	<div class="container w3layouts agileits">

		<div id="chatbox">

			<div id="friendslist">

				<div id="topmenu">
					<span class="friends">CONTACTS</span>
				</div>

				<div id="friends">

					<div class="friend w3layouts">
						<img src="__static__/images/winter-soldier.jpg">
						<p>
							<strong>Bucky Barnes</strong>
							<span>wintersoldier@gmail.com</span>
						</p>
						<div class="status available"></div>
					</div>

					<!--<div class="friend">
						<img src="__static__/images/captain-america.jpg">
						<p>
							<strong>Steve Rogers</strong>
							<span>captainamerica@gmail.com</span>
						</p>
						<div class="status away"></div>
					</div>

					<div class="friend">
						<img src="__static__/images/flying-falcon.jpg">
						<p>
							<strong>Sam Wilson</strong>
							<span>flyingfalcon@gmail.com</span>
						</p>
						<div class="status inactive"></div>
					</div>

					<div class="friend">
						<img src="__static__/images/black-widow.jpg">
						<p>
							<strong>Natasha Romanoff</strong>
							<span>blackwidow@gmail.com</span>
						</p>
						<div class="status inactive"></div>
					</div>

					<div class="friend agileits">
						<img src="__static__/images/iron-man.jpg">
						<p>
							<strong>Tony Stark</strong>
							<span>imironman4u@gmail.com</span>
						</p>
						<div class="status inactive"></div>
					</div>-->

					<div id="search">
						<input type="text" id="searchfield" value="Search contacts...">
					</div>

				</div>

			</div>

			<div id="chatview" class="p1">

				<div id="profile">
					<div id="close">
						<div class="cy"></div>
						<div class="cx"></div>
					</div>
					<p>Bucky Barnes</p>
					<span>wintersoldier@gmail.com</span>
				</div>

				<div id="chat-messages">

					<label>Monday 01</label>

					<div class="message w3layouts">
						<img src="__static__/images/winter-soldier.jpg">
						<div class="bubble">
							Why are you protecting me?
							<span>4 min</span>
						</div>
					</div>

					<div class="message right agileits">
						<img src="__static__/images/captain-america.jpg">
						<div class="bubble">
							Coz you're my best friend
							<span>3 min</span>
						</div>
					</div>

					<div class="message">
						<img src="__static__/images/winter-soldier.jpg">
						<div class="bubble">
							I don't remember you
							<span>2 Min</span>
						</div>
					</div>

					<div class="message right w3layouts">
						<img src="__static__/images/captain-america.jpg">
						<div class="bubble">
							But I remember you
							<span>1 Min</span>
						</div>
					</div>

					<div class="message">
						<img src="__static__/images/winter-soldier.jpg">
						<div class="bubble">
							Well, okay!
							<span>Now</span>
						</div>
					</div>

				</div>

				<div id="sendmessage">
					<input type="text" value="Send message...">
					<button id="send"></button>
				</div>

			</div>

		</div>

	</div>

	<div class="footer w3layouts agileits">
		<p> &copy; 2016 Friends Chat History Widget. All Rights Reserved | Design by <a href="http://w3layouts.com/" target="_blank"> W3layouts </a></p>
	</div>

	<!-- Custom-JavaScript-File-Links -->
		<!-- Default-JavaScript --> <script src="__static__/js/jquery.min.js"></script>
		<!-- Tabs-JavaScript -->    <script src="__static__/js/tabs.js"></script>
	<!-- //Custom-JavaScript-File-Links -->

</body>
<!-- //Body -->

</html>